<template>
  <div>
    <!--   头部   -->
    <!--<mt-header title="登录">-->
      <!--<router-link to="/Login" slot="left">-->
        <!--<mt-button icon="back" >返回</mt-button>-->
      <!--</router-link>-->
      <!--<mt-button icon="more" slot="right"></mt-button>-->
    <!--</mt-header>-->

    <!--  中间部分  -->
    <div class="Center">
      <div><img src="../assets/ico@1x11.png" alt=""></div>
      <p>设置头像，填写验证码，直接登录</p>
      <p>验证码已发送至<span></span></p>
      <p>验证码</p>

      <div>
        <input type="text" placeholder="请输入验证码" >
        <img src="../assets/cxfs.png" alt="">
      </div>

      <p>设置昵称</p>
      <input type="text" placeholder="请设置您的昵称"  >

      <p>设置密码</p>
      <input type="password" placeholder="请设置新的密码" >
      <button>下一步</button>
    </div>

  </div>
</template>
<script>
  import Vue from 'vue';
  import Mint from 'mint-ui';
  import 'mint-ui/lib/style.css';
  Vue.use(Mint);
  export default{
    name:"LoginCode",
    data(){
      return{

      }
    },
    created:function(){

    },
    methods: {

    }

  }
</script>


<style scoped lang="scss">
  input{
    outline:none;
  }

  .mint-header{
    background: black;
  }

  .Center{
    width:100%;
    background:#ffffff;
    text-align: center;
    div:nth-of-type(1){
      width:144px;
      height:144px;
      border-radius:50%;
      border:1px solid #dcdcdc;
      margin-top:48px;
      margin-left: 248px;
      img{
        width:84px;
        height:84px;
        margin:auto;
        margin-top:28px;
      }
    }
    p:nth-of-type(1)
    {
      font-size:20px;
      color: #3b3b43;
      margin-top: 20px;
    }
    p:nth-of-type(2)
    {
      font-size:28px;
      color: #a1a1a1;
      margin-top: 30px;
    }
    p:nth-of-type(3)
    {
      font-size:24px;
      color: #3b3b43;
      margin-top:60px;
    }
    div:nth-of-type(2)
    {
      width:100%;
      display: flex;
      input{
        width:518px;
        text-align: center;
        padding-bottom:26px;
        border:none;
        border-bottom:1px solid #cdcdcd;
        font-size:32px;
        margin-top:30px;
        margin-left: 66px;
      }
      img{
        width:94px;
        height:24px;
        position:relative;
        left:-90px;
        top:35px;
      }
    }
    p:nth-of-type(4)
    {
      font-size:24px;
      color: #3b3b43;
      margin-top:34px;
    }
    input{
      width:518px;
      text-align: center;
      padding-bottom:26px;
      border:none;
      border-bottom:1px solid #cdcdcd;
      font-size:32px;
      margin-top:30px;
    }
    p:nth-of-type(5){
      font-size:24px;
      color: #3b3b43;
      margin-top:30px;
    }
    button{
      width:468px;
      height:74px;
      border:none;
      border-radius: 30px;
      font-size:28px;
      color:#FFFFFF;
      text-align:center;
      margin-top:76px;
      outline:none;
      background: url("../assets/btn_pay@1x.png");
      background-size:100%;
    }
  }
</style>
